<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>
</head>
<body>

<div class="box">
    
</div>

</div>

    <script>
        //创建Light类
       class  Light{
           
           constructor(node){
           this.LightId = 1
           this.parentNode = node
           //图片渲染到页面上
           this.init()
           // 点击换颜色
           this.bindevent()
           }
           // 原型方法 初始化
           init(){
               // 添加图片节点
              let img =new Image()
              img.src=`./img/${this.LightId}.jpg`
              this.parentNode.appendChild(img)
              //指向新的img节点 fdfdff
              this.img =img
           }
           // 原型方法  添加点击事件
           bindevent() {
            this.img.addEventListener("click", () => {
                this.LightId ===3 && (this.LightId=0)
               this.LightId++
               this.img.src = `./img/${this.LightId}.jpg`
            })
        } 
          
           
       }
var light1 = new Light(document.querySelector('.box'))
var light2 = new Light(document.querySelector('.box'))

console.log(light1);
console.log(light2);
    </script>
</body>
</html>